{% extends 'users/base.html' %}

{% block title %}Add Head of Section{% endblock %}

{% block card_header %}
    <h4 class="card-title mb-0">Add New Head of Section</h4>
{% endblock %}

{% block card_content %}
<form method="post" class="needs-validation" novalidate>
    {% csrf_token %}
    
    <div class="row mb-3">
        <div class="col-md-6">
            <div class="form-group">
                <label for="{{ form.email.id_for_label }}" class="form-label">Email Address *</label>
                {{ form.email }}
                {% if form.email.help_text %}
                    <small class="form-text text-muted">{{ form.email.help_text|safe }}</small>
                {% endif %}
                {% if form.email.errors %}
                    <div class="invalid-feedback d-block">
                        {{ form.email.errors|join:", " }}
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="{{ form.password.id_for_label }}" class="form-label">Password *</label>
                {{ form.password }}
                {% if form.password.help_text %}
                    <small class="form-text text-muted">{{ form.password.help_text|safe }}</small>
                {% endif %}
                {% if form.password.errors %}
                    <div class="invalid-feedback d-block">
                        {{ form.password.errors|join:", " }}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="row mb-3">
        <div class="col-md-6">
            <div class="form-group">
                <label for="{{ form.first_name.id_for_label }}" class="form-label">First Name *</label>
                {{ form.first_name }}
                {% if form.first_name.errors %}
                    <div class="invalid-feedback d-block">
                        {{ form.first_name.errors|join:", " }}
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="{{ form.last_name.id_for_label }}" class="form-label">Last Name *</label>
                {{ form.last_name }}
                {% if form.last_name.errors %}
                    <div class="invalid-feedback d-block">
                        {{ form.last_name.errors|join:", " }}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="row mb-3">
        <div class="col-12">
            <div class="form-group">
                <label for="{{ form.department.id_for_label }}" class="form-label">Section *</label>
                {{ form.department }}
                {% if form.department.help_text %}
                    <small class="form-text text-muted">{{ form.department.help_text|safe }}</small>
                {% endif %}
                {% if form.department.errors %}
                    <div class="invalid-feedback d-block">
                        {{ form.department.errors|join:", " }}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="d-flex justify-content-between mt-4">
        <a href="{% url 'dashboards:director' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Dashboard
        </a>
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save"></i> Save Head of Section
        </button>
    </div>
</form>
{% endblock %}

{% block extra_js %}
<script>
// Enable Bootstrap form validation
(function () {
    'use strict'
    
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll('.needs-validation')
    
    // Loop over them and prevent submission
    Array.prototype.slice.call(forms)
        .forEach(function (form) {
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                
                form.classList.add('was-validated')
            }, false)
        })
})()
</script>
{% endblock %}